<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>

  <title>paper-calculator-panels</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../../platform/platform.js"></script>
  
  <link rel="import" href="../paper-calculator-panels.html">

  <style>
  
    body, html {
      height: 100%;
    }
  
    body {
      margin: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-touch-callout: none;
    }
    
    #outerPanels {
      width: 100%;
      height: 100%;
      font-size: 20px;
      overflow: hidden;
    }
    
    .panel1 {
      background: #3f51b8;
    }
    
    .panel2 {
      background: #009688;
    }
    
    .panel3 {
      background: #ff5722;
    }
    
  </style>

</head>

<body unresolved>

  <paper-calculator-panels id="outerPanels" margin="40" drawerWidthRatio="0.8" responsiveWidth="1000px">
  
    <div main class="panel1">panel1</div>
    
    <paper-calculator-panels drawer id="innerPanels" margin="40" drawerWidthRatio="0.5" responsiveWidth="1000px">
    
      <div main class="panel2">panel2</div>
      
      <div drawer class="panel3">panel3</div>
      
    </paper-calculator-panels>
    
  </paper-calculator-panels>
  
</body>

</html>
